<template>
  <a-modal
      title="分配菜单"
      :visible="this.menuVisible"
      :destroyOnClose="true"
      @cancel="handleCancel"
      @ok="handleOk"
  >
    <a-tree
        checkable
        v-if="this.menuData.length>0"
        :default-expand-all="true"
        :defaultCheckedKeys="this.menuJson"
        :tree-data="this.menuData"
        @check="onCheck"
    />
  </a-modal>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'
import {pull} from 'lodash'

export default {
  name: "RoleAllotMenu",
  data() {
    return {
      checkedKeys: []
    }
  },
  computed: {
    ...mapState('role', ['menuVisible', 'menuData', 'menuJson'])
  },
  methods: {
    ...mapActions('role', ['addMenu']),
    ...mapMutations('role', ['setState']),
    handleCancel() {
      this.setState({name: 'menuVisible', value: false})
    },
    handleOk() {
      if (this.checkedKeys.length > 0) {
        this.addMenu({menuJson: JSON.stringify(pull(this.checkedKeys, 'all'))})
        this.setState({name: 'menuVisible', value: false})
      } else {
        this.$message.warning('请选择节点！！！', 3)
      }
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys
    },
  }
}
</script>

<style scoped>

</style>